<!DOCTYPE html>
<html lang = "en">
	<head>
	<style type = "text/css">
		body{
				overflow:      visible;
				width:         230px;
				background:    white;
				color:         black;
				font-family:   sans-serif;
			}
			body,p,li,ul,div,h1,label{
				margin:        0 auto;
				padding:       0;
			}

			div{
				text-align:    center;
			}

			h1{
				font-size:     0.8em;
				border-radius: 15px;
				padding:       2px 10px;
				margin:        5px;
				text-shadow:   0 1px 1px #fff;
				background:    -webkit-gradient(
																				linear,
																				left bottom,
																				left top,
																				from(#d9d9d9),
																				to(#e6e6e6)
																			);
				border:        1px solid #bdbdbd;
				color:         #6e6e6e
			}

			h1.open{
				text-align:    left;
				padding-left:  6px
			}

			h1 span{
				width:         16px;
				height:        16px;
				margin:        0;
				padding:       0 8px;
				background:    url(%3D%3D)
					no-repeat;
			}

			h1 span.down{
				background:    url()
					no-repeat;
			}

			p{
				font-size:     13px;
			}

			p.left{
				text-align:    left;
			}

			label{
				font-size:     0.8em;
				font-weight:   normal;
			}

			label.main{
				width:         210px;
				padding:       2px 0;
				display:       block;
				text-align:    center;
				border:        1px solid #bdbdbd;
				border-bottom: 0;
				border-radius: 10px 10px 0 0;
				background:    -webkit-gradient(
																				linear,
																				left bottom,
																				left top,
																				from(#d9d9d9),
																				to(#e6e6e6)
																			);
				margin-top:    10px;
			}

			#master_input label{
				background:    -webkit-gradient(
																				linear,
																				left bottom,
																				left top,
																				from(#08ce08),
																				to(#4ae64a)
																			);
				border-color:  #19b319;
			}

			#master_input input.good{
				background:    #effcef !important;
			}

			#master_input input.bad{
				background:    #ffe8ea !important;
			}

			input[type = text],input[type = password],input[type = submit]{
				width:         204px;
				margin:        0;
				padding:       3px;
				border:        1px solid #aaa;
				margin-left:   1px;
			}

			#genpasswd{
				font-family:    monospace;
				letter-spacing: 3px;
				font-weight:    bold;
			}

			#Len{
				width:         30px;
			}

			#scp_list{
				margin:        0 auto;
				padding:       0;
				list-style:    none;
				color:         #fff;
				background:    -webkit-gradient(
																				linear,
																				left bottom,
																				left top,
																				from(#08ce08),
																				to(#4ae64a)
																			);
				width:         207px;
				border-radius: 10px;
			}

			#scp_list li{
				margin:        0 !important;
				padding:       0 !important;
				list-style:    none !important;
				color:         #fff !important;
				cursor:        pointer !important;
				font-size:     11px !important;
				line-height:   18px !important;
			}

			#scp_list li:first-child{
				border-radius: 10px 10px 0 0;
			}

			#scp_list li:last-child{
				border-radius: 0 0 10px 10px;
			}

			#scp_list li:hover,#scp_list li.over{
				background:    rgba(0,0,0,0.15) !important;
			}

			#scp_list li.active{
				background:    rgba(255,255,255,0.5) !important;
				font-weight:   bold;
			}

			#regen{
				margin:          10px 0;
				width:           200px;
				padding:         8px 0;
				background:      -webkit-gradient(
																						linear,
																						left bottom,
																						left top,
																						from(#08ce08),
																						to(#4ae64a)
																					);
				-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.75);
				border-radius:   40px;
				border:          1px solid #19b319;
				font-size:       14px;
				font-weight:     bold;
				color:           #023b02;
			}

			#regen:hover{
				background:      -webkit-gradient(
																						linear,
																						left bottom,
																						left top,
																						from(#09ef09),
																						to(#68ea68)
																					);
			}

			#regen:focus, #regen:active{
				background:      -webkit-gradient(
																						linear,
																						left bottom,
																						left top,
																						from(#4ae64a),
																						to(#08ce08)
																					);
			}

			#regen:disabled, #regen:focus:disabled, #regen:active:disabled, #regen:hover:disabled{
				background:      -webkit-gradient(
																						linear,
																						left bottom,
																						left top,
																						from(#34a556),
																						to(#34a556)
																					);
				border-color:    #527a52;
			}
		</style>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="password.class.js"></script>
		<script type="text/javascript" src="supergenpass.js"></script>
		<script type = "text/javascript">
			var passid,
							sendPass,
				   passes = JSON.parse(localStorage['passwords'] || '[]');

			function genPass(passid)
			{
				sendPass = Pass.init(passid);
				pass = sendPass.generate($('#domain').text(),$('#disabletld').is('checked'));
				$('#genpasswd').val(pass.pass);
				$('#generated').slideDown(250);
				$('#regen').removeAttr('disabled');
			}

			$(document).ready(function(){

				//Get the URL from the selected tab
				chrome.tabs.getSelected(null,function(tab){

					$('#domain').text(gp2_process_uri(tab.url,false));

					if(passes.length==1)
					{
							genPass(passes[0]);
					}
					else
					{
							$.each(passes,function(i,id){
									$('#scp_list').append(
										$('<li/>',
										{
											id: id,
											text: localStorage['password_'+id+'_name']
										}).click(function(){
											$('#genpasswd').val('');
											passid = this.id;
											$(this).siblings().removeClass('active');
											$(this).addClass('active');
											sendPass = Pass.init(passid);
											//We need a password input box!
											if(sendPass.password()===false || sendPass.password()=='')
											{
													$('#master_input').slideDown(250);
													$('#password').focus().select();
											}
											else
											{
													$('#master_input').slideUp(250);
													genPass(passid);
											}
										})
									);
							});
					}

				});

				$('#Passwd').keyup(function(e){if(e.keyCode==13){$('#regen').click();}});

				$('#genpasswd').hover(
					function(){$(this).get(0).type = 'text'},
					function(){$(this).get(0).type = 'password'}
				);

				$('#regen').attr('disabled','disabled').click(function(){genPass(passid);});

				$('body').keyup(function(e){
						if(e.keyCode==40)
						{
								next = $('#scp_list li.over').next().length>0?
										$('#scp_list li.over').next():$('#scp_list li').first();
								$('#scp_list li').removeClass('over').filter(next).addClass('over');
						}
						else if(e.keyCode==38)
						{
								prev = $('#scp_list li.over').prev().length>0?
										$('#scp_list li.over').prev():$('#scp_list li').last();
								$('#scp_list li').removeClass('over').filter(prev).addClass('over');
						}
						else if(e.keyCode==13)
						{
								$('#scp_list .over').click();
								return false;
						}
				});

				$('#password').keydown(function(e){
					if(e.keyCode == 13)
					{
						sendPass.password($(this).val());
						genPass($('#scp_list .active').attr('id'));
						return false;
					}
				});

			});

  </script>
 </head>
	<body>

		<div>

				<h1 id="domain">SuperChromePass</h1>

				<div id="disableltdbox">
					<input id="disabletld" type="checkbox">
					<label for="disabletld">Disable subdomain removal</label>
				</div>

				<ul id="scp_list"></ul>

	   <div id="master_input" style="display: none">
						<label class="main" id="dscr" for="Passwd">Master Password:</label>
						<input id="password" type="password">
				</div>

				<div id="generated" style="display: none">

						<label class="main" for="genpasswd">Your generated password</label>
						<input id="genpasswd" type="password">
						<button id="regen">Regenerate</button>
				</div>

		</div>

	</body>
</html>